
<template>
  <Echart :options="lineChartOptions"></Echart>
</template>  
<script>
import Echarts from '@/components/Echart/index';
export default {
  components: { Echarts },
  props: {
    options: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      lineChartOptions: {
        legend: {
          top: 30
        },
        tooltip: {},
        grid: {
          top: 100,
          left: 50,
          right: 50
        },
        dataset: {
          source: [
            ['product', '18#鱼塘', '19#鱼塘', '20#鱼塘'],
            ['2023-10-21', 43.3, 85.8, 93.7],
            ['2023-10-22', 43.3, 85.8, 93.7],
            ['2023-10-23', 43.3, 85.8, 93.7],
            ['2023-10-24', 83.1, 73.4, 55.1],
            ['2023-10-25', 86.4, 65.2, 82.5],
            ['2023-10-26', 36.5, 53.9, 39.1],
            ['2023-10-27', 72.4, 42.6, 79.5],
            ['2023-10-28', 72.4, 53.9, 39.1],
            ['2023-10-29', 72.4, 53.9, 39.1],
            ['2023-10-30', 72.4, 53.9, 39.1],
            ['2023-10-31', 72.4, 53.9, 39.1],
            ['2023-11-01', 72.4, 53.9, 39.1],
            ['2023-11-02', 72.4, 53.9, 39.1],
            ['2023-11-03', 72.4, 53.9, 39.1],
            ['2023-11-04', 83.1, 73.4, 55.1],
            ['2023-11-05', 43.3, 85.8, 93.7],
          ]
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 50,
            end: 100
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        xAxis: { type: 'category' },
        yAxis: {},
        series: [
          {
            type: 'bar', label: this.formatter(1)
          }, {
            type: 'bar', label: this.formatter(2)
          }, {
            type: 'bar', label: this.formatter(3)
          }]
      }
    };
  },
  mounted () { },
  methods: {
    formatter (index) {
      return {
        show: true, //开启显示
        position: 'insideTop', //在上方显示
        formatter: (e) => {
          let data = e.data
          return data[index]
        },//显示百分号
        textStyle: { //数值样式
          color: '#ffffff',//字体颜色
          fontSize: 10//字体大小
        }
      }
    }
  }
};
</script>